<template>
  <div class="modal">
    <div class="head_navigat">
      <div class="title">角色管理</div>
      <div class="button-container">
        <div>
          <button @click="onAddItem">添加</button>
        </div>
        <!-- <div class="saveButton">
          <button @click="save">保存到剧本</button>
        </div> -->
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" >
        <el-table-column fixed prop="id" label="角色编号" width="100">
          <template v-slot="{ row }">
            {{ row.id }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="角色名称" width="230">
          <template v-slot="{row}">
            <el-input v-model="row.name" @change="handleInput(row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="aliasList" label="角色昵称" width="310">
          <template v-slot="{ row }">
            <div v-for="(item,index) in row.aliasList" :key="index" style="position: relative">
              <el-input style="text-align:center;width: 260.61px;height: 50px;border-radius: 20px;margin-bottom: 10px" class="add-role-container" v-model="item.alias" :placeholder="'请输入角色昵称'" @change="handleInput(row)"></el-input>
              <span v-if="row.aliasList.length>1" class="minus-sign" @click="aliasDelete(row, index)" ><img src="/svg/minusIcon.svg"></span>
            </div>
            <div>
              <el-button class="add-button-style" @click="handleAddCharacterNickname(row)"><img src="/svg/plus.svg"/></el-button>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="imageList" label="角色照片" width="407.15" >
          <template v-slot="{ row }">
            <div class="adaptive-height" style="position: relative">
              <ImageUpload :headImageList="row.imageList"
                           @fileRemoved="childItem => handleFileRemoved(childItem,row)"
                           @fileAdded="data => handleFileAdded(data,row)"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template #default="scope">
            <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.row.id)"
            >
              <img src="/svg/trashCan.svg"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 目录管理的内容 -->
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref,watch } from "vue";
import {getCharacterById, updateCharacter, delCharacter, addCharacter} from "@/api/character";
import {useRoute, useRouter} from "vue-router";
import {message} from "@/utils/message";
import {ElMessage} from "element-plus";

import ImageUpload from '../components/ImageUpload.vue';

const route = useRoute();
const router = useRouter();

const scriptId = ref(0);

const tableData = ref([]);

const maxSort = ref(0);
const initCharacter = ref({
  scriptId: 0,
  status: 1,
  // id: maxSort,
  name: "默认角色",
  image: JSON.stringify([{"image":import.meta.env.VITE_DEFAULT_IMAGE}]),
  alias: JSON.stringify([{"alias":"默认角色"}])
});

const aliasDelete = (row, index) => {
  row.aliasList.splice(index,1)
  row.alias=JSON.stringify(row.aliasList)
  row.image=JSON.stringify(row.imageList.map(item => ({ image: item.url })))
  updateCharacter(row).then(res=>{
    if(res.code === "0000"){
      refreshCharacter(scriptId.value)
    }else {
      message(res.message, {
        type: "error"
      });
    }
  }).catch(err=>{
    console.log(err)
  })
}

const handleFileRemoved = (childItem, row) => {
  row.alias=JSON.stringify(row.aliasList)
  row.image=JSON.stringify(row.imageList.map(item => ({ image: item.url })))
  updateCharacter(row).then(res=>{
    if(res.code === "0000"){
      refreshCharacter(scriptId.value)
    }else {
      message(res.message, {
        type: "error"
      });
    }
  }).catch(err=>{
    console.log(err)
  })
}
const handleFileAdded = (data,row) => {
  row.alias=JSON.stringify(row.aliasList)
  row.image=JSON.stringify(row.imageList.map(item => ({ image: item.url })))
  updateCharacter(row).then(res=>{
    if(res.code === "0000"){
      refreshCharacter(scriptId.value)
    }else {
      message(res.message, {
        type: "error"
      });
    }
  }).catch(err=>{
    console.log(err)
  })
}
const handleInput = (row) => {
  // row.scriptId = scriptId.value;
  console.log(row);
  row.alias=JSON.stringify(row.aliasList)
  row.image=JSON.stringify(row.imageList.map(item => ({ image: item.url })))
  updateCharacter(row).then(res=>{
    if(res.code === "0000"){
      refreshCharacter(scriptId.value)
    }else {
      message(res.message, {
        type: "error"
      });
    }
  }).catch(err=>{
    console.log(err)
  })


};

const handleAddCharacterNickname = (row)=>{
  let defaultNickname = {
    alias:'默认昵称'
  }
  row.aliasList.push(defaultNickname)
  console.log("111111111111111")
  console.log(row)
  row.alias=JSON.stringify(row.aliasList)
  row.image=JSON.stringify(row.imageList.map(item => ({ image: item.url })))
  updateCharacter(row).then(res=>{
    if(res.code === "0000"){
      refreshCharacter(scriptId.value)
    }else {
      message(res.message, {
        type: "error"
      });
    }
  }).catch(err=>{
    console.log(err)
  })

}

const deleteRow = (id: number) => {
  // initCharacter.value.id = maxSort.value - 1;
  delCharacter(id).then(res => {
    if (res.code === "0000") {
      tableData.value.splice(id, 1);

    } else {
      message(res.message, {
        type: "error"
      });
    }
    refreshCharacter(scriptId.value);
  });
};
const onAddItem = () => {
  // initCharacter.value.id = maxSort.value + 1;
  addCharacter(initCharacter.value).then(res => {
    if (res.code === "0000") {
      tableData.value.unshift(initCharacter);
    } else {
      ElMessage.error(res.message);
    }
    refreshCharacter(scriptId.value);
  });
};
const refreshCharacter = (scriptId: number) => {
  tableData.value = [];
  getCharacterById(scriptId).then(res => {
    const characterList = res.data.list;
    for (let i = 0; i < characterList.length; i++) {
      const imageArray = JSON.parse(characterList[i].image)
      const aliasArray = JSON.parse(characterList[i].alias)
      tableData.value.push({
        id: characterList[i].id,
        name: characterList[i].name,
        imageList: imageArray,
        aliasList: aliasArray
      });
      if (characterList[i].id > maxSort.value) {
        maxSort.value = characterList[i].id;
      }
      console.log(imageArray);
      console.log(typeof imageArray);
    }
  });
};
onMounted(() => {
  scriptId.value = Number(route.query.scriptId);
  initCharacter.value.scriptId = scriptId.value;
  if (!scriptId.value) {
    router.push("/error/404");
  } else {
    refreshCharacter(scriptId.value);
  }
});

const save = () => {
  // alert("保存成功")
  //   保存到pinia 里面
};
</script>
<style>

.elUploadContainer {
  border: #0bdcb7 0px solid;
  background-color: #232323;
  border-radius: 10px;
  width: 360px;
  height: 50px;
  justify-content: space-between;

  .el-upload-list {
    padding-top: 30px;
    color: white;
  }

  .upload-button-container {
    padding-left: 250px;
    padding-top: 7px;
  }
}

.el-upload-list__item {
  width: 300px;
}

.el-table {
  height: 627.49px;
  background-color: #383838;
}

.el-table__header {
  width: 1170px !important;
  background-color: #383838 !important;
}


</style>

<style scoped>
:deep(.el-upload-list__item.is-success .el-upload-list__item-status-label ){
  display: none;
}
:deep(.el-upload-list--picture-card .el-upload-list__item){
  background-color: #383838;
  opacity: 1;
  border-radius: 6px;
  border: 1px solid rgba(28, 28, 28, 1);
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
}
:deep(.el-upload-list--picture-card) {
  --el-upload-list-picture-card-size: 50px
}
:deep(.el-upload-list .el-upload-list--picture-card){
  padding-top: 30px;
}
:deep(.el-upload-list .el-upload-list--picture-card){
  width: 500px;
}
 :deep(.el-upload-list--picture-card){
   padding-top: 60px;
 }
.adaptive-height{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  align-items: flex-start;
  min-height: 200px;
  overflow: auto;
}
:deep(.center-input .el-input__inner ){
  text-align: center;
}
.add-role-container {
  width: 100%;
}

.minus-sign {
  position: absolute;
  top: 35px; /* Adjust this value to position the minus icon as needed */
  right: 150px; /* Adjust this value to position the minus icon as needed */
  cursor: pointer;
  transform: translateY(-100%);
}



.minus-sign img {
  vertical-align: middle;
}


.add-button-style{
  left: 267px;
  top: 282.57px;
  width: 260.61px;
  height: 50px;
  opacity: 1;
  border-radius: 10px;
  background: rgba(35, 35, 35, 1);
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);

}
:deep(.el-table th) {
  background-color: #383838!important; /* 你想要的背景颜色 */
}
:deep(.el-table thead){
  /** 文本1 */
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 23.87px;
  color: rgba(229, 229, 229, 1);
  text-align: center;
  vertical-align: top;
}
:deep(.el-table tr ){
  background-color: #383838 !important;
}
.modal {
  /* 样式 */
  width: 1170px;
  height: 707.39px;

  .head_navigat {
    height: 80px;
    width: 1170px;
    background-color: #525252;
    display: flex;
    padding-top: 24px;
    padding-bottom: 25px;

    .title {
      font-size: 22px;
      font-weight: 50;
      padding-left: 540.28px;
    }

    .button-container {
      padding-left: 200px;
      display: flex;

      button {
        width: 100px;
        height: 40px;
        background-color: #232323;
        font-size: 16.18px;
        font-weight: 500;
        line-height: 24.27px;
        border-radius: 7px;
      }

      .saveButton {
        padding-left: 20px;

        button {
          background-color: #fc8b1a;
        }

        width: 100px;
        height: 40px;
        font-size: 16.18px;
        font-weight: 500;
        line-height: 24.27px;
        border-radius: 7px;
        color: black;
      }

      .exitIcon {
        padding-left: 55px;
        padding-top: 3px;
      }
    }
  }

  .content {
    height: 627.04px;
    background-color: #383838;
    display: flex;
    overflow: auto;
  }
}
</style>
